<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>慕课手机实战案例</title>
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/index.css">
	<link rel="shotcut icon" href="./images/logo.png">
	<link rel="stylesheet" href="./css/animation.css">
</head>

<body>
	<!--header部分--->
	<div class="header">
		<div class="header-logo">
			<a href="javascript::void();">慕课手机实战</a>
		</div>
		<div class="header-nav">
			<a href="javascript::void();">外观</a>
			<a href="javascript::void();">配置</a>
			<a href="javascript::void();">型号</a>
			<a href="javascript::void();">说明</a>
			<a href="javascript::void();">其他产品</a>
			<a href="javascript::void();" class="buy">立即购买</a>
		</div>
	</div>

	<!--screen-1-->
	<div class="screen-1">
	<h3><i>慕课手机</i> 让你的生活更精彩</h3>
	<div class="screen1-phone"></div>
	<div class="screen1-shadow"></div>
	</div>
	
	<!-- screen-2 -->
	<div class="screen-2">
		<h3>优美的设计，更令人着迷</h3>
		<p>采用受欢迎的设计，让他更加出色。</p>
		<p>款式小巧，轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</p>
		<div class="screen2-phone">
			<div class="screen2-point1">高清摄像</div>
			<div class="screen2-point2">超薄机身</div>
			<div class="screen2-point3">大屏显示</div>
		</div>
	</div>

	<!-- screen-3 -->
	<div class="screen-3">
		<div class="wrap">
			<h3>外型小巧，功能强大的手机</h3>
			<p>采用受欢迎的设计，让它更加出色。</p>
			<p>款式小巧，轻便手感更舒服。绚丽高清的显示屏，整个外观格外精致</p>
			<div class="info">
				<div>
					<p>5.7</p>
					<span>英寸大屏</span>
				</div>
				<div>
					<p>1200</p>
					<span>万像素</span>
				</div>
				<div>
					<p>3D</p>
					<span>touch</span>
				</div>
				<div>
					<p>A9</p>
					<span>处理器</span>
				</div>
			</div>
			<div class="screen3-phone"></div>
		</div>
	</div>

	<!-- screen-4 -->
	<div class="screen-4">
		<div class="wrap">
			<h3>丰富的手机型号</h3>
			<p>找到适合你的手机</p>
			<div class="screen4-phone1">
				<p>慕课红</p>
				<span>16G/32G/64G</span>
			</div>
			<div class="screen4-phone2">
				<p>土豪金</p>
				<span>16G/32G/64G</span>
			</div>
			<div class="screen4-phone3">
				<p>太空灰</p>
				<span>16G/32G/64G</span>
			</div>
			<div class="screen4-phone4">
				<p>绅士黑</p>
				<span>16G/32G/64G</span>
			</div>
		</div>
	</div>

	<!-- screen-5 -->
	<div class="screen-5">
		<h3>游戏，学习，拍照，有这一部就够了</h3>
		<p>看视频，拍摄高清视频、照片，视频聊天、一机多功能，让你生活更丰富多彩</p>
		<div class="screen5-back"></div>
	</div>

	<!-- screen-6 -->
	<div class="screen-6">
		<div class="screen5-buy">立即购买</div>
	</div>

	<!-- footer -->
	<div class="footer">© 计算机 172 | 蔡磊 | 1710 529 0224</div>

	<!-- aside -->
	<div class="aside">
		<a href="javascript::void">外观</a>
		<a href="javascript::void">配置</a>
		<a href="javascript::void">型号</a>
		<a href="javascript::void">说明</a>
		<a href="javascript::void">其他</a>
	</div>
</body>
</html>